<template>
    <div class="page-container">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item class="collapseItem" title="系统公告" name="notice">
                <div class="card">
                    <el-timeline style="max-width: 600px">
                        <el-timeline-item v-for="(notice, index) in noticeData" :timestamp="notice.createTime"
                            color="#0bbd87" placement="bottom">
                            <h4>{{ notice.title }}</h4>
                            <p>{{ notice.content }}</p>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { noticPageSercive } from '@/api/system';

const noticeData = ref()
const activeName = ref('notice')

const load = async () => {
    const params = {
        pageNum: 1,
        pageSize: 4,
    }
    const result = await noticPageSercive(params)
    noticeData.value = result.list
}
load()

</script>